import React, {Component} from 'react';
import {Select} from 'antd';
import {selectRole} from '../../services/users';
const Option = Select.Option;
class RoleNameSelect extends Component{
  constructor(props) {
    super(props);
    const value = this.props.value || {};
    console.log(this.props);
    this.state = {
       ROLE_ID: value.ROLE_ID|| 0,
    };
    console.log(this.state);
    let options={};
    let m = this.getData();
    m.then((result)=> {
      options = result.data.map(d => <Option key={d.ID}>{d.ROLE_NAME}</Option>);
      this.setState(...this.state,{options:options});
    });
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
    console.log(this.state);
  }

  async getData() {
    let s = await selectRole();
    return s;
  }


  handleBlur() {
    console.log('blur');
  }

  handleFocus() {
    console.log('focus');
  }
  handleChange=(values)=>
  {
    if (!('value' in this.props)) {
      this.setState(...this.state,{ROLE_ID:values});
    }
    this.triggerChange({ROLE_ID:values});
  }
  render()
  {
    const state=this.state;
    return( <Select
      showSearch
      value={state.ROLE_ID}
      style={{ width: 300}}
      onChange={this.handleChange}
    >
      {this.state.options}
    </Select>)

  }
}

export  default  RoleNameSelect;
